<!--
 * @Author: bsj
 * @Date: 2024-11-21
 * @LastEditors: baoshijie baoshijie
 * @LastEditTime: 2024-11-24 15:00:28
 * @Description: 规格配置
 * @FilePath: \computing-equipment\src\views\costParameterConfiguration\coreCode.vue
-->
<template>
    <div class="specificationConfiguration">
        <div class="optRow">
            <el-form :model="searchForm" ref="searchFormRef" :rules="rules" :inline="true" label-width="80px">
                <el-form-item label="规格名称:" prop="specifications">
                    <el-input v-model="formMame" maxlength="10" placeholder="请输入代码进行搜索" style="width: 150px" />
                    <el-button type="primary" @click="newItem">搜索</el-button>
                </el-form-item>
                <el-form-item label="" prop="specifications">
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 900px;" border stripe>
            <el-table-column type="index" width="60" label="序号"></el-table-column>
            <el-table-column prop="formMame" width="160" label="规格名称"></el-table-column>
            <el-table-column prop="specifications" label="帆布规格"></el-table-column>
            <el-table-column prop="weight" label="帆布单重kg/㎡"></el-table-column>
            <el-table-column prop="canvasThickness" label="帆布厚"></el-table-column>
            <el-table-column prop="unitPrice" label="帆布单价"></el-table-column>
            <el-table-column prop="opt" width="160" label="操作">
                <template #default="scope">
                    <el-link type="primary" @click="editItem(scope.row)">编辑</el-link>
                    <el-link class="optBtn" type="danger" @click="deleteItem(scope.row, scope.$index)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" top="5vh">
            <el-form :model="optParams" ref="addRef" :rules="rules" :inline="false" size="small" label-width="120px">
                <el-form-item label="规格名称" prop="formMame">
                    <el-input v-model="optParams.formMame" maxlength="10" style="width: 200px" />
                    <el-button type="primary" @click="chooseCoating">选择上胶量</el-button>
                </el-form-item>
                
                <el-form-item label="帆布规格" prop="specifications">
                    <el-input v-model="optParams.specifications" disabled maxlength="10" style="width: 200px" />
                </el-form-item>
                <el-form-item label="帆布单重kg/㎡" prop="weight">
                    <el-input v-model="optParams.weight" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="帆布厚" prop="canvasThickness">
                    <el-input v-model="optParams.canvasThickness" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="帆布单价" prop="unitPrice">
                    <el-input v-model="optParams.unitPrice" disabled style="width: 200px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="coatingWeightDialogVisible" title="上胶量选择" width="500" top="5vh">
            <el-table :data="tableDataCoating" border style="width: 100%" height="500px" highlight-current-row  @current-change="handleCurrentChange">
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="expandRow">
                            <div class="item" v-for="(item, index) in props.row.list">
                                <div class="itemRow">
                                    <div class="itemRowLable">
                                        贴胶厚:
                                    </div>
                                    <div class="itemRowData">
                                        {{ item.thickness }}
                                    </div>
                                </div>
                                <div class="itemRow">
                                    <div class="itemRowLable">
                                        上胶量kg/㎡:
                                    </div>
                                    <div class="itemRowData">
                                        {{ item.amount }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序列号" align="center" width="80" />
                <el-table-column prop="specifications" label="帆布规格"></el-table-column>
                <el-table-column prop="weight" label="帆布单重kg/㎡"></el-table-column>
                <el-table-column prop="canvasThickness" label="帆布厚"></el-table-column>
                <el-table-column prop="unitPrice" label="帆布单价"></el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="coatingWeightDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="chooseSubmit">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
const addRef = ref(null)
const rules = {
    formMame: [
        { required: true, message: '请输入规格名称', trigger: 'blur' }
    ]
}
const tableDataCoating = ref([{
    specifications: 'EP100',
    weight: '0.366',
    canvasThickness: '0.5',
    unitPrice: '17',
    list: [{
        thickness: '1',
        amount: '0.844'
    }, {
        thickness: '1.1',
        amount: '0.844'
    }, {
        thickness: '1.2',
        amount: '0.844'
    }, {
        thickness: '1.3',
        amount: '0.844'
    }, {
        thickness: '1.4',
        amount: '0.844'
    }, {
        thickness: '1.5',
        amount: '0.844'
    }, {
        thickness: '1.6',
        amount: '0.844'
    }, {
        thickness: '1.7',
        amount: '0.844'
    }, {
        thickness: '1.8',
        amount: '0.844'
    }]

}, {
    specifications: 'EP125',
    weight: '0.44',
    canvasThickness: '0.6',
    unitPrice: '18',
    list: [{
        thickness: '1',
        amount: '0.844'
    }, {
        thickness: '1.1',
        amount: '0.844'
    }, {
        thickness: '1.2',
        amount: '0.844'
    }, {
        thickness: '1.3',
        amount: '0.844'
    }]

}]);
const currentRow=ref(null)
const handleCurrentChange = (val) => {
  currentRow.value = val
}
function chooseCoating() {
    currentRow.value =null
    coatingWeightDialogVisible.value=true
}
function chooseSubmit() {
    optParams.value=Object.assign(optParams.value,currentRow.value)
    coatingWeightDialogVisible.value=false
}
const coatingWeightDialogVisible=ref(false)
const formMame=ref(null)
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const optParams = ref({
    formMame: '',
    specifications: '',
    weight: '',
    canvasThickness: '',
    unitPrice: '',
    list: [{
        thickness: '',
        amount: ''
    }]
})
const isEidt = ref(false)
const submitForm = () => {
    dialogVisible.value = false
    if (!isEidt.value) {
        tableData.value.push(optParams.value)
    }
}
const handleAdd = () => {
    isEidt.value = false
    dialogVisible.value = true
    optParams.value = {
        code: '',
        coreAdhesivePrice: '',
        coverGluePrice: ''
    }
}
const editItem = (row) => {
    isEidt.value = true
    dialogVisible.value = true
    optParams.value = row
}
const deleteItem = (row, index) => {
    ElMessageBox.confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除数据
        tableData.value.splice(index, 1);
    }).catch(() => { });
}
const tableData = ref([{
    formMame:'EP400/2',
    specifications: 'EP100',
    weight: '0.366',
    canvasThickness: '0.5',
    unitPrice: '17',
    list: [{
        thickness: '1',
        amount: '0.844'
    }, {
        thickness: '1.1',
        amount: '0.844'
    }]

}, {
    formMame:'EP375/3',
    specifications: 'EP125',
    weight: '0.44',
    canvasThickness: '0.6',
    unitPrice: '18',
    list: [{
        thickness: '1',
        amount: '0.844'
    }, {
        thickness: '1.1',
        amount: '0.844'
    }, {
        thickness: '1.2',
        amount: '0.844'
    }, {
        thickness: '1.3',
        amount: '0.844'
    }]

}]);
</script>
<style scoped lang="scss">
.optRow {
    // margin-bottom: 20px;
}

.optBtn {
    margin: 0 20px;
}
</style>